
<template>
  <h1>循环指令</h1>
  <ul>
    <!-- item从1开始，每执行一次，item的值+1，一直到数字n -->
    <!-- v-for的效果: 执行5次，生成5个li，里面是数字1~5 -->
    <li v-for="item in 5">{{ item + 1 }}</li>
  </ul>

  <table border="1">
    <caption>商品列表</caption>
    <tr>
      <th>序号</th>
      <th>名称</th>
      <th>价格</th>
      <th>库存</th>
      <th>操作</th>
    </tr>
    <tr v-for="(item, index) in productArr">
      <td>{{ index + 1 }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
      <td>{{ item.num }}</td>
      <td><button @click="del(index)">删除</button></td>
    </tr>
  </table>
</template>

<script setup>
import { ref } from 'vue';

const productArr = ref([
  {
    name: '小米',
    price: 1999,
    num: 100
  },
  {
    name: '华为',
    price: 2999,
    num: 200
  },
  {
    name: '苹果',
    price: 3999,
    num: 300
  },
  {
    name: 'vivo',
    price: 1999,
    num: 400
  },
]);

const del = (index) => {
  if (confirm('确定删除吗？')) {
    productArr.value.splice(index, 1);
  }
};
</script>

<style scoped>/* 样式可以根据需要添加 */
</style>